{% extends "pages/overseer/_shell.html" %}
{% from "components/macros/layout.html" import page_header, card %}

{% block title %}Overseer - {{ project_name }}{% endblock %}

{% block overseer_content %}
{% call page_header("Overview", "Your stack at a glance") %}{% endcall %}
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
  {% for group, heading in [("components", "Components"), ("services", "Services")] %}
  {% call card(heading, navigation[group]|length ~ " installed") %}
    {% if navigation[group] %}
    <ul class="space-y-2">
      {% for entry in navigation[group] %}
      <li><a href="{{ entry.url }}" hx-get="{{ entry.url }}" hx-target="#app-content" hx-swap="innerHTML" hx-push-url="true"
             class="flex items-center justify-between gap-3 text-sm text-aegis-text hover:text-aegis-teal">
        <span>{{ entry.title }}</span><span class="inline-flex items-center" sse-swap="{{ entry.event }}" hx-target="this">
          {% set health_status = entry.status %}{% include "pages/overseer/_status_dot.html" %}
        </span>
      </a></li>
      {% endfor %}
    </ul>
    {% else %}<p class="text-sm text-aegis-muted">No {{ heading|lower }} registered.</p>{% endif %}
  {% endcall %}
  {% endfor %}
</div>
{% endblock %}